<template>
  <div>

    <el-menu :router="true" :defaultActive="active" class="el-menu container" mode="horizontal" @select="handleSelect">
      <el-menu-item class="logo" index="/">主页</el-menu-item>
      <el-menu-item index="/list">列表</el-menu-item>

      <template v-if="user">
        <el-menu-item index class="right" @click="handleExit"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销
        </el-menu-item>
        <el-submenu index="5" class="right">
          <span slot="title"> {{ user.username }} </span>
          <el-menu-item index="5-1"><i class="fa fa-sign-out" aria-hidden="true"></i>个人中心</el-menu-item>
          <el-menu-item index="5-2">发布文章</el-menu-item>
          <el-menu-item index="5-3">消息</el-menu-item>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item index="/signUp" class="right"><i class="fa fa-user-o" aria-hidden="true"></i> 注册</el-menu-item>
        <el-menu-item index="/signIn" class="right"><i class="fa fa-key" aria-hidden="true"></i> 登陆</el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<style lang="css" scoped>
  .right {
    float: right;
  }

  .container {
    padding: 0 10%;
    background: #eef1f6;
  }

  .el-menu-item {
    background: #eef1f6;
  }

  .el-menu-item:nth-child(n+0):hover {
    background: white;
  }

  .logo {
    margin-left: 0;
    font-size: 25px;
    font-weight: 100;
  }

  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 0;
    background: #eef1f6;
    color: #20a0ff;
  }
</style>
<script>
//  import {mapState} from 'vuex';
  import { mapState, mapActions } from 'vuex'

  export default {
    name: 'Header',
    data() {
      return {
        active: '/'
      }
    },
    created() {
      this.active = this.$route.path; // 解决刷新不高亮
      this.$router.afterEach((to, from) => { // 解决编程式切换路由不高亮
        this.active = to.path;
      });
    },
    computed: mapState(['user']),
    methods: {
      handleSelect(key, path) {
        console.log(key, path);
      },
      ...mapActions(['exit']),
      handleExit() {
//        this.$store.dispatch('exit');
        this.exit();
        localStorage.setItem('loginUser', null);
        this.$message.success('退出成功!');
      }
    }
  }
</script>


